<template>
    <div class="songListDetails">
        <div class="slide">
            <div class="img">
                <img :src="src" alt="">
            </div>
            <!-- 右侧信息 -->
            <div class="right">
                <div>
                    <h1>{{ album.album_name }}</h1>
                    <!-- 用户头像 -->
                    <div class="use">
                        <p>{{ singer }}</p>
                        <p>2024-11-03</p>
                        {{ album.img_url }}
                    </div>
                </div>
                <!-- 右侧信息下方 -->
                <div>
                    <el-button @click="newList" type="primary but" round>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-bofangyinle"></use>
                        </svg>                        
                        播放全部
                    </el-button>
                    <el-button v-if="isCollect" type="primary but" @click="cancel" round>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yishoucang"></use>
                        </svg>
                        已收藏
                    </el-button>
                    <el-button v-else type="primary but" @click="add" round>
                        <svg class="icon"  aria-hidden="true">
                            <use xlink:href="#icon-tianjiashoucang"></use>
                        </svg>
                        收藏该专辑
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { url } from '@/apiUrl';
export default {
    data(){
        return {
            src:``,
            isCollect:false,
        }
    },
    props:{
        album:null,
        singer:null,
        album_name:null
    },
    watch:{
        album:function(){
            console.log("执行了初始化");
        }
    },
    methods:{
    is_Collect(){
        console.log(this.album);
      this.$store.commit("isCollect",{
        url:this.album.album_pic,
        callback:(flag) => {
        console.log("flag的值",flag);
        this.isCollect = flag
      } 
      })
    },
    cancel(){
      this.$store.commit("cancelCollect",{
        fieldValue: this.album,
        fieldName: "album_id",
        callback: () => {//更新我喜欢的音乐
          this.$store.commit("getCollect",()=>{
            this.is_Collect()//更新收藏状态
            this.$message({
              message:"已取消收藏",
              duration:"1422"
            })
          })
        }
      })
    },
    add(){
        console.log("当前专辑对象",this.album);

      this.$store.commit("CollectAlbum",{
        album:this.album,
        callback:() => {//更新我喜欢的音乐
            this.is_Collect()//更新收藏状态
            this.$message({
              message:"已收藏该专辑",
              duration:"1422"
            })
        },
      })
    },
    newList() {
            this.$emit("newList")//传递给父组件处理事件
        },
    },
  updated(){
    console.log("初始化album",this.album);
    this.src=`${url}/${this.album.album_pic}`
    this.is_Collect()

  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/common.scss';

.songListDetails {
    .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    img {
        margin-right: 3rem;
        width: 18.85rem;
        height: 18.85rem;
        border-radius: 5%;
    }

    .slide {
        display: flex;
        justify-content: flex-start;
        div {
            .use{
                width: 100%;
            }
            .head {
                margin: 0.5rem 0;
                width: 4rem;
                height: 4rem;
                border-radius: 50%;
            }
        }

        .but {
            .icon{
                font-size:2rem;
                margin-bottom: -0.2rem;
            }
            background-color: $undercolor;
        }
    }
}
</style>